<template>
  <div>
    <px-row :gutter="16" style="min-width: 1620px">
      <px-col :span="24" class="water_col" style="margin-bottom: 16px">
        <div class="waterdom borderRidus boxShadow" style="padding: 0">
          <px-scrollbar>
            <px-tabs v-model="activeTab" class="equipment-tabs" style="margin-left: 24px; background: none">
              <px-tab-pane v-for="(tab, index) in tabPaneList" :key="index" :name="tab.name">
                <template #label>
                  <p class="pane-bottom">{{ tab.label }}</p>
                  <p class="pane-line" />
                </template>
              </px-tab-pane>
            </px-tabs>
          </px-scrollbar>
        </div>
        <!-- <Ro /> -->
        <component :is="currentTabCmp" />
      </px-col>
    </px-row>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, ref, toRefs, reactive, onMounted } from "vue";
import Ro from "./components/ro.vue";
import filterElement from "./components/filterElement.vue";
import Uv from "./components/uv.vue";
import TOCUv from "./components/tocUv.vue";
import ActivatedCarbon from "./components/activatedCarbon.vue";
import Uf from "./components/uf.vue";
import Resion from "./components/resion.vue";
import Mdg from "./components/mdg.vue";
import All from "./components/all.vue";
import Fp from "./components/fp.vue";
import { computed } from "vue";
import { useRoute } from "vue-router";
const activeTab = ref("all");
const route = useRoute();
onMounted(() => {
  if (route.query.devType) {
    if (route.query.devType == "RO") {
      activeTab.value = "ro";
    }
    if (route.query.devType == "Rinse RO") {
      activeTab.value = "ro";
    }
    if (route.query.devType == "SF") {
      activeTab.value = "filterElement";
    }
    if (route.query.devType == "UV") {
      activeTab.value = "uv";
    }
    if (route.query.devType == "TOC-UV") {
      activeTab.value = "toc-uv";
    }
    if (route.query.devType == "RESIN") {
      activeTab.value = "resion";
    }
    if (route.query.devType == "CARBON") {
      activeTab.value = "activatedCarbon";
    }
    if (route.query.devType == "UF") {
      activeTab.value = "Uf";
    }
    if (route.query.devType == "MDG") {
      activeTab.value = "mdg";
    }
    if (route.query.devType == "FP") {
      activeTab.value = "fp";
    }
  }
});
const tabPaneList = [
  {
    label: "总览",
    name: "all",
    component: All
  },
  {
    label: "RO膜",
    name: "ro",
    component: Ro
  },
  {
    label: "滤芯",
    // name: "滤芯"
    name: "filterElement",
    component: filterElement
  },
  {
    label: "UV灯管",
    name: "uv",
    component: Uv
  },
  {
    label: "TOC-UV灯管",
    name: "toc-uv",
    component: TOCUv
  },
  {
    label: "树脂",
    name: "resion",
    component: Resion
  },
  {
    label: "活性炭",
    name: "activatedCarbon",
    component: ActivatedCarbon
  },
  {
    label: "UF滤膜",
    name: "Uf",
    component: Uf
  },
  {
    label: "MDG",
    name: "mdg",
    component: Mdg
  },
  {
    label: "压滤机滤布",
    name: "fp",
    component: Fp
  }
];

const data = reactive({
  queryParams: {
    indicatorName: "",
    classCode: "",
    systemCode: "",
    indicatorLevel: "",
    startTime: "",
    endTime: "",
    pageNum: 1,
    pageSize: 20
  }
});
const liquidList = [
  {
    itemValue: "x1ca"
  },
  {
    itemValue: "x2ca"
  },
  {
    itemValue: "x3ca"
  }
];

const currentTabCmp = computed(() => {
  const curtabPaneItem = tabPaneList.find(tab => tab.name === activeTab.value);
  return curtabPaneItem.component;
});

const dateRange = ref([]);
const defaultTime: [Date, Date] = [new Date(2000, 1, 1, 0, 0, 1), new Date(2000, 1, 1, 23, 59, 59)];
const { queryParams } = toRefs(data);
const handleQuery = () => {};
const resetQuery = () => {};
</script>
<style scoped lang="scss">
.water_col {
  height: 100%;
}

.waterdom {
  width: 100%;
  height: 100%;
  padding: 16px 24px;
  background-color: #fff;
  border-radius: 4px;
}

.first_width {
  width: calc(100% - 16px);
}

.topmain {
  height: 36px;
  font-size: 14px;
  font-weight: 500;
  line-height: 36px;
  color: rgb(0 0 0 / 80%);
  text-align: center;
  background: #e7eefb;
  border: 1px solid #dfdfdf;
  border-radius: 5px 5px 0 0;
}

.main1 {
  width: 100%;
  height: 71px;
  border-left: 1px solid #dfdfdf;
}

.main-col {
  position: relative;
  border-right: 1px solid #dfdfdf;
  border-bottom: 1px solid #dfdfdf;

  .main-col-title {
    position: absolute;
    top: 12px;
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: rgb(0 0 0 / 80%);
    text-align: center;
  }

  .main-col-value {
    position: absolute;
    top: 32px;
    width: 100%;
    font-size: 17px;
    font-weight: 600;
    line-height: 20px;
    color: rgb(0 0 0 / 80%);
    text-align: center;
  }
}

.main2 {
  width: 100%;
  height: 365px;
  border-bottom: 1px solid #dfdfdf;
  border-left: 1px solid #dfdfdf;
  border-radius: 0 0 5px 5px;
}

.col-div {
  width: 100%;
  height: 100%;
}

.col-top {
  width: 100%;
  height: 35px;
  font-size: 14px;
  font-weight: 600;
  line-height: 35px;
  color: rgb(0 0 0 / 80%);
  text-align: center;
  border-right: 1px solid #dfdfdf;
}

.col-mian {
  width: 100%;
  height: 329px;
  border-top: 1px solid #dfdfdf;

  .col-mian-list {
    float: left;
    width: 20%;
    height: 100%;
    border-right: 1px solid #dfdfdf;
  }

  .col-mian-list2 {
    float: left;
    width: 50%;
    height: 100%;
    border-right: 1px solid #dfdfdf;
  }

  .col-mian-list-odometer {
    position: relative;
    width: 100%;
    height: 57px;
    border-bottom: 1px solid #dfdfdf;

    .odometer-icon {
      position: absolute;
      top: 15px;
      left: calc(50% - 15px);
    }
  }

  .col-mian-list-main {
    width: 100%;
    height: 232px;
    border-bottom: 1px solid #dfdfdf;

    .col-mian-list-main-left {
      position: relative;
      float: left;
      width: 12px;
      height: 100%;
      border-right: 1px solid #dfdfdf;
    }

    .caretright-icon {
      position: absolute;
      bottom: 50px;
      left: -7px;
    }

    .col-mian-list-main-right {
      float: left;
      width: calc(100% - 12px);
      height: 100%;

      .col-mian-list-main-right-main1 {
        width: 100%;
        height: 24px;
        font-size: 14px;
        font-weight: 500;
        line-height: 24px;
        color: #000;
        text-align: center;
        background-color: #dbffe5;
        border-bottom: 1px solid #dfdfdf;
      }

      .col-mian-list-main-right-main2 {
        width: 100%;
        height: 24px;
        font-size: 14px;
        font-weight: 500;
        line-height: 24px;
        color: #000;
        text-align: center;
        background-color: #fffbc4;
        border-bottom: 1px solid #dfdfdf;
      }

      .col-mian-list-main-right-main3 {
        position: relative;
        width: 100%;
        height: 160px;
        text-align: center;
        border-bottom: 1px solid #dfdfdf;

        .col-mian-list-main-right-main3-p1 {
          position: absolute;
          top: 20px;
          width: 100%;
          font-size: 14px;
          font-weight: 600;
          line-height: 20px;
          color: #000;
          text-align: center;
        }

        .col-mian-list-main-right-main3-p2 {
          position: absolute;
          top: 40px;
          width: 100%;
          font-size: 14px;
          font-weight: 600;
          line-height: 20px;
          color: #000;
          text-align: center;
        }

        .col-mian-list-main-right-main3-p3 {
          position: absolute;
          top: 90px;
          width: 100%;
          font-size: 14px;
          font-weight: 600;
          line-height: 20px;
          color: #000;
          text-align: center;
        }

        .col-mian-list-main-right-main3-p4 {
          position: absolute;
          top: 110px;
          width: 100%;
          font-size: 14px;
          font-weight: 600;
          line-height: 20px;
          color: #000;
          text-align: center;
        }
      }

      .col-mian-list-main-right-main4 {
        width: 100%;
        height: 24px;
        font-size: 14px;
        font-weight: 500;
        line-height: 24px;
        color: #000;
        text-align: center;
        background-color: #dbffe5;
        border-bottom: 1px solid #dfdfdf;
      }
    }
  }

  .col-mian-list-bottom {
    width: 100%;
    height: 36px;
    font-size: 14px;
    font-weight: 600;
    line-height: 36px;
    color: rgb(0 0 0 / 80%);
    text-align: center;
  }
}

.col-mian2 {
  width: 100%;
  height: 329px;
  border-right: 1px solid #dfdfdf;
}

.waterdom-top {
  width: 100%;
  height: 100%;
  border: 1px solid #dfdfdf;
  border-radius: 4px;

  .waterdom-top-col {
    position: relative;
    border-right: 1px solid #dfdfdf;
  }
}

.time-p1 {
  position: absolute;
  top: 20px;
  width: 100%;
  font-size: 32px;
  font-weight: 600;
  line-height: 49px;
  color: #000;
  text-align: center;
}

.time-p2 {
  position: absolute;
  top: 64px;
  width: 100%;
  font-size: 18px;
  font-weight: 500;
  line-height: 25px;
  color: #3b82f6;
  text-align: center;
}

.time-p3 {
  position: absolute;
  top: 90px;
  width: 100%;
  font-size: 18px;
  font-weight: 500;
  line-height: 25px;
  color: #3b82f6;
  text-align: center;
}

.waterdom-top-title1 {
  height: 37px;
  font-size: 14px;
  font-weight: 500;
  line-height: 36px;
  color: #000;
  text-align: center;
  background: #e7eefb;
  border-bottom: 1px solid #dfdfdf;
}

.waterdom-top-title3 {
  height: 37px;
  font-size: 14px;
  font-weight: 500;
  line-height: 36px;
  color: #000;
  text-align: center;

  .waterdom-top-title2-left {
    float: left;
    width: calc(50% - 1px);
    height: 100%;
    text-align: center;
    border-right: 1px solid #dfdfdf;
  }

  .waterdom-top-title2-right {
    float: left;
    width: 50%;
    height: 100%;
    text-align: center;
  }
}

.waterdom-top-title2 {
  height: 32px;
  font-size: 12px;
  font-weight: 500;
  line-height: 32px;
  color: #000;
  text-align: center;
  border-bottom: 1px solid #dfdfdf;

  .waterdom-top-title2-left {
    float: left;
    width: calc(50% - 1px);
    height: 100%;
    text-align: center;
    border-right: 1px solid #dfdfdf;
  }

  .waterdom-top-title2-right {
    float: left;
    width: 50%;
    height: 100%;
    text-align: center;
  }

  .waterdom-top-col1 {
    width: 100%;
    height: 100%;
    border-right: 1px solid #dfdfdf;
  }

  .waterdom-top-col2 {
    width: 100%;
    height: 100%;
  }
}

.waterdom-top-title4 {
  position: relative;
  height: 52px;

  .waterdom-top-title4-left {
    position: absolute;
    top: 21px;
    left: 21px;
  }

  .waterdom-top-title4-right {
    position: absolute;
    top: 21px;
    left: 51px;
  }

  .waterdom-top-title4-left2 {
    position: absolute;
    top: 31px;
    left: calc(50% - 20px);
  }
}

.device_mian {
  width: 100%;
  height: 115px;
  margin-top: 16px;

  .device_mian_top {
    width: 100%;
    height: 36px;
    font-size: 14px;
    font-weight: 500;
    line-height: 36px;
    color: rgb(0 0 0 / 80%);
    text-align: center;
    background: #e7eefb;
    border: 1px solid #dfdfdf;
    border-radius: 5px 5px 0 0;
  }

  .device_mian_bottom {
    width: 100%;
    height: 79px;
    border: 1px solid #dfdfdf;
    border-top: none;
    border-radius: 0 0 4px 4px;

    .device_mian_bottom_left {
      position: relative;
      float: left;
      width: 45%;
      height: 100%;
      border-right: 1px solid #dfdfdf;

      .device_mian_bottom_left_p1 {
        position: absolute;
        top: 13px;
        left: 12px;
        font-size: 14px;
        font-weight: 500;
        color: rgb(0 0 0 / 80%);
      }

      .device_mian_bottom_left_p2 {
        position: absolute;
        top: 44px;
        left: 12px;
        font-size: 14px;
        font-weight: 500;
        color: rgb(0 0 0 / 80%);
      }
    }

    .device_mian_bottom_right {
      position: relative;
      float: left;
      width: 55%;
      height: 100%;

      .right_icon {
        position: absolute;
        top: 36px;
        right: 17px;
      }
    }
  }
}

.background1 {
  background: #fee;
}

.background2 {
  background: #dbffe5;
}

.color1 {
  color: #f00;
}

.rightnum {
  position: absolute;
  top: 22px;
  right: 51px;
  font-size: 24px;
  font-weight: 600;
  line-height: 33px;
  color: #f00;
}

.rightnumunit {
  font-size: 14px;
}
</style>
